<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路径分页标签和徽章组件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--路径组件-->
<!--面包屑导航-->
<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品列表</a></li>
    <li><a href="#">羊绒毛衣</a></li>
</ol>

<!--分页组件-->
<!--默认分页-->
<ul class="pagination pagination-lg">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li class="disabled"><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

<!--翻页效果-->
<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>

<!--对齐翻页链接-->
<ul class="pager">
    <li class="previous"><a href="#">上一页</a></li>
    <li class="next"><a href="#">下一页</a></li>
</ul>

<!--翻页项禁用-->
<li class="previous disabled"><a href="#">上一页</a></li>

<!--标签-->
<!--在文本后面带上标签-->
<h3>标签<span class="label label-default">new</span></h3>
<!--不同色调的标签-->
<h3>标签<span class="label label-primary">new</span></h3>
<h3>标签<span class="label label-success">new</span></h3>
<h3>标签<span class="label label-info">new</span></h3>
<h3>标签<span class="label label-warning">new</span></h3>
<h3>标签<span class="label label-danger">new</span></h3>


<!--徽章-->
<!--未读信息数量徽章-->
<a href="#">信息<span class="badge">10</span></a>
<!-- 按钮中使用徽章-->
<button class="btn btn-success">
    提交 <span class="badge">3</span>
</button>
<!--激活状态自动适配色调-->
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首页<span class="badge">2</span></a>
    </li>
    <li><a href="#">资讯</a></li>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>